<template>
  <section class="mobile-footer-page">
    <div class="mobile-footer-body">
      <div class="footer-qr">
        <img class="footer-qr-icon" src="@/assets/images/home/qrcode.jpg" />
        <p class="footer-qr-tip">微信公众号</p>
      </div>
      <img @click="$router.push({name:'home'})" class="footer-logo" src="@/assets/images/mobile/logo-2.png" />
      <div class="footer-box">
        <div v-for="item in menuList" :key="item.name" class="footer-sub-box">
          <p class="footer-sub-title" @click="toLink(item)">{{ item.name }}</p>
          <div class="footer-sub-list">
            <a
              class="footer-sub-item"
              v-for="v in item.list"
              :key="v.name"
              @click="toLink(v)"
            >{{ v.name }}</a>
          </div>
        </div>
      </div>
      <div class="footer-desc">
        <img class="footer-desc-icon" src="@/assets/images/phone.png" />
        <p class="footer-desc-text">+86-755-23372612 | +86-755-23372649</p>
      </div>
      <div class="footer-desc">
        <img class="footer-desc-icon" src="@/assets/images/email.png" />
        <p class="footer-desc-text">contact@datarer.com</p>
      </div>
      <div class="footer-desc">
        <img class="footer-desc-icon" src="@/assets/images/local.png" />
        <p class="footer-desc-text">深圳市福田区深南大道1006号国际创新中心B座14</p>
        <p class="footer-desc-text">14-18th Floor, Block B,Shenzhen International Center No.1006 Shennan Road,Futian District,Shenzhen,China</p>
      </div>
      <div class="footer-tip-box">
        <p class="footer-tip-item">
          未经数据学徒同意，不得转载本网站所有招聘信息及作品
        </p>
        <p class="footer-tip-item">
          广东省人社局电话：020-12333
        </p>
      </div>
    </div>
    <FooterCom />
  </section>
</template>

<script>
import Vue from 'vue'
import FooterCom from "../../footer";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    FooterCom
  },
  // 组件状态值
  data() {
    return {
      menuList: [
        {
          name: '提供服务',
          key: 'cultivate',
          query: {
            type: 1, url: 'provideTraining'
          },
          type: 1,
          list: [
            {
              name: '教育培训',
              key: 'cultivate',
              query: {
                type: 1, url: 'provideTraining'
              },
              type: 1,
            },
            {
              name: '实践项目',
              key: 'productManage',
              type: 1,
            },
            {
              name: '研究成果',
              key: '/researchResult',
              type: 2,
            },
            {
              name: '前沿资讯',
              key: '/newsAction',
              type: 2,
            },
            {
              name: '规划咨询',
              key: '/studentConsultation',
              type: 2,
            },
            {
              name: '海外服务',
              key: 'cultivate',
              query: {
                type: 1, url: 'overseaServices'
              },
              type: 1,
            },
          ]
        },
        {
          name: '关于我们',
          key: 'cultivate',
          query: {
            type: 2, url: 'companyProfile'
          },
          type: 1,
          list: [
            {
              name: '平台简介',
              key: 'cultivate',
              query: {
                type: 2, url: 'companyProfile'
              },
              type: 1,
            },
            {
              name: '往期活动',
              key: '/otherServices?type=1',
              type: 2,
            },
            {
              name: '法律声明',
              key: 'cultivate',
              query: {
                type: 2, url: 'legalNotices'
              },
              type: 1,
            },
            {
              name: '免责声明',
              key: 'cultivate',
              query: {
                type: 2, url: 'disclaimer'
              },
              type: 1,
            },
            {
              name: '隐私协议',
              key: 'cultivate',
              query: {
                type: 2, url: 'PrivacyPolicy'
              },
              type: 1,
            },
            {
              name: '服务协议',
              key: 'cultivate',
              query: {
                type: 2, url: 'ServicePolicy'
              },
              type: 1,
            },
          ]
        },
        {
          name: '联系我们',
          key: 'cultivate',
          query: {
            type: 3, url: 'helpCenter'
          },
          type: 1,
          list: [
            {
              name: '帮助中心',
              key: 'cultivate',
              query: {
                type: 3, url: 'helpCenter'
              },
              type: 1,
            },
            {
              name: '常见问题',
              key: 'cultivate',
              query: {
                type: 3, url: 'FAQ'
              },
              type: 1,
            },
            {
              name: '商务合作',
              key: 'cultivate',
              query: {
                type: 3, url: 'businessCooperations'
              },
              type: 1,
            },
            {
              name: '加入我们',
              key: 'cultivate',
              query: {
                type: 3, url: 'joinUs'
              },
              type: 1,
            },
          ]
        }
      ]
    };
  },
  created() {
  },
  // 组件方法
  methods: {
    toLink(item) {
      console.log('item', item)
      if (item.key === 'productManage') {
        this.$message('请到pc端进行操作')
        return
      } else if (item.type === 1) {
        return this.$emit('menuHandle', item.key, item.query || '')
      }
      return this.$emit('jumpTo', item.key, item.query || '')
    }
  },
  beforeDestroy() {
  }
};
</script>
<style lang="less" scoped>
.mobile-footer-page {
  display: none;
  position: relative;
  text-align: left;
  .mobile-footer-body {
    padding: 0 0.1rem;
    background: #F6F8FA;
    overflow: hidden;
  }
  .footer-qr {
    display: flex;
    position: absolute;
    top: 0.14rem;
    right: 0.12rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .footer-qr-icon {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
  }
  .footer-qr-tip {
    margin-top: 0.03rem;
    font-size: 0.09rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8B8B8B;
    line-height: 0.13rem;
  }
  .footer-logo {
    display: block;
    margin: 0.28rem 0 0.23rem;
    width: 0.91rem;
    height: 0.39rem;
  }
  .footer-box {
    margin-bottom: 0.1rem;
  }
  .footer-sub-title {
    margin-bottom: 0.12rem;
    font-size: 0.13rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383D;
    line-height: 0.18rem;
  }
  .footer-sub-list {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-sub-item {
    margin-bottom: 0.15rem;
    width: 29%;
    font-size: 0.11rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8B8B8B;
    line-height: 0.16rem;
    &:nth-child(4n - 1) {
      width: 25%;
    }
    &:nth-child(4n) {
      width: 17%;
      text-align: right;
    }
  }
  .footer-desc {
    position: relative;
    margin-bottom: 0.15rem;
    padding-top: 0.02rem;
    padding-left: 0.26rem;
    min-height: 0.2rem;
    font-size: 0.12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383D;
    line-height: 0.17rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .footer-desc-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.2rem;
    height: 0.2rem;
  }
  .footer-desc-text {
    & + .footer-desc-text {
      margin-top: 0.08rem;
    }
  }
  .footer-tip-box {
    padding: 0.15rem 0;
    font-size: 0.11rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #BDBDBD;
    line-height: 0.16rem;
    text-align: center;
    border-top: 0.01rem solid #D4D6DA;
  }
  .footer-tip-item {
    margin-bottom: 0.05rem;
    &:last-child {
      margin-bottom: 0;
    }
  }

  ::v-deep .footer-com {
    padding: 0.1rem 0;
    height: auto;
    font-size: 0.1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.14rem;
    .footer-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon {
      margin: 0 0.06rem;
      width: 0.12rem;
      height: 0.13rem;
    }
  }
}
</style>
